<template>

	<view :style="[bodyStyle]" :class="[bodyClass]" class="i-img-advert  e-flex">
		<view class="i-img-advert__swiper-box" :style="[swiperStyle]">
			<view class="e-rela">
				<swiper class="i-img-advert__swiper-box__swiper" autoplay @change="handleChange" circular>
					<block v-for="(item, index) in option.swiperImgList" :key="index">
						<swiper-item class="e-flex-xy-center" :item-id="`${index}`" @tap="jumpLink(item.link)">
							<view class="swiper-img" :style="[imgStyle]">
								<image mode="aspectFit" :id="`imgBannerItem-${index}`" :style="[imgStyle]"
									class="img-item" :key="index" :src="$fullLink(item.url)">
								</image>
							</view>
						</swiper-item>
					</block>
				</swiper>
				<view class="indicators e-abso e-flex" :class="'indicators'+option.indicatorsType"
					:style="indicatorsStyle" v-if="option.indicatorsShow">
					<template v-if="option.indicatorsType < 3">
						<view class="indicators-item e-m-r-4" :class="{'indicators-active':index == currentItemId}"
							v-for="(item,index) in option.swiperImgList" :key="index">

						</view>
					</template>
					<template v-else>
						{{current}}/{{option.swiperImgList.length}}
					</template>
				</view>
			</view>

		</view>
		<view class="i-img-advert__img-box" :style="[rightBoxStyle]">
			<view :style="[index === 0 ? rightImgBoxStyle :'']" v-for="(item,index) in option.imgList" :key="index">
				<image mode="aspectFill" :style="[imgStyle]" :src="$fullLink(item.url)" @tap="jumpLink(item.link)">
				</image>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, computed } from 'vue'
	import { useLayoutCompoments } from './hooks'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import type { pageLink } from './type'
	import { px2rpx } from './utils'

	type ImgItem = {
		url : string
		link : pageLink,

	}

	const props = withDefaults(defineProps<{
		option : {
			styleType : 0 | 1 | 2
			swiperImgList : ImgItem[]
			imgList : ImgItem[]
			indicatorsShow : boolean
			indicatorsType : 0 | 1 | 2 | 3
			indicatorsAlign : 'left' | 'center' | 'right'
			backgroundColor : string
			imgMargin : number
			paddingTop : number
			paddingBottom : number
			paddingX : number
			radiusTop : number
			radiusBottom : number
		}
	}>(), {
		option: () => ({
			styleType: 0,
			swiperImgList: [],
			imgList: [],
			indicatorsShow: true,
			indicatorsType: 0,
			indicatorsAlign: 'center',
			backgroundColor: 'rgba(245, 246, 249, 1)',
			imgMargin: 0,
			paddingTop: 0,
			paddingBottom: 0,
			paddingX: 0,
			radiusTop: 0,
			radiusBottom: 0
		})
	})

	const ctx = useCurrentInstance()

	const current = ref(1)
	const currentItemId = ref('0')

	const { viewStyle: bodyStyle, bodyClass, jumpLink } = useLayoutCompoments(ctx, props.option)

	const imgStyle = computed(() => {
		return {
			borderRadius: `${px2rpx(props.option.radiusTop)} ${px2rpx(props.option.radiusTop)}  ${px2rpx(props.option.radiusBottom)} ${px2rpx(props.option.radiusBottom)}`
		}
	})
	const swiperStyle = computed(() => {
		return { paddingRight: `${px2rpx(props.option.imgMargin / 2)}` }
	})
	const rightBoxStyle = computed(() => {
		return { paddingLeft: `${px2rpx(props.option.imgMargin / 2)}`, '--img-margin': `${props.option.imgMargin}px` }
	})
	const rightImgBoxStyle = computed(() => {
		return { marginBottom: `${props.option.imgMargin}px` }
	})
	// const rightImgStyle = computed(() => {
	// 	return {height:`calc(96px - ${px2rpx(props.option.imgMargin/2)})`}
	// })
		
   const indicatorsStyle = computed(() => {
		switch (props.option.indicatorsAlign) {
			case 'left':
				return 'left: 40rpx'

			case 'center':
				return 'left: 50%;transform: translateX(-50%);'

			case 'right':
				return 'right: 40rpx'
		}
	})

	const handleChange = (e : { detail : { current : number, currentItemId : string } }) => {
		current.value = e.detail.current + 1
		currentItemId.value = e.detail.currentItemId
	}
</script>
<style scoped lang="scss">
	@import '@/components/list/css/layoutCommon.scss';

	.i-img-advert {
		img {
			object-fit: fill;
		}

		&__swiper-box {

			flex: 0 0 50%;
			height: 394rpx;
			overflow: hidden;

			&__swiper {
				white-space: nowrap;
				height: 394rpx;
			}

			.swiper-img {
				width: 100%;
				height: 394rpx !important;
				overflow: hidden;
				transition: 0.5s;

				.img-item {
					width: 100% !important;
					height: 394rpx !important;
				}
			}

			.indicators {
				bottom: 20rpx;
				z-index: $z-index-normal;
			}

			.indicators0 {
				.indicators-item {
					width: 8rpx;
					height: 8rpx;
					border-radius: 50%;
					background: rgba(0, 0, 0, .2);
				}

				.indicators-active {
					background-color: rgba(0, 0, 0, .2);
				}
			}

			.indicators1 {
				.indicators-item {
					width: 8rpx;
					height: 8rpx;
					border-radius: 50%;
					background: rgba(0, 0, 0, .2);
				}

				.indicators-active {
					width: 16rpx;
					border-radius: 4rpx;
					background-color: rgba(0, 0, 0, .2);
				}
			}

			.indicators2 {
				.indicators-item {
					width: 16rpx;
					height: 4rpx;
					border-radius: 4rpx;
					background: rgba(0, 0, 0, .2);
				}

				.indicators-active {
					background-color: rgba(0, 0, 0, .2);
				}
			}

			.indicators3 {
				width: 52rpx;
				height: 34rpx;
				background: rgba(0, 0, 0, .2);
				border-radius: 16rpx;
				font-size: 20rpx;
				color: $base-color-white;
				justify-content: center;
			}
		}

		&__img-box {
			flex: 0 0 50%;

			>view {
				height: calc((394rpx - var(--img-margin)) / 2);

				image {
					width: 100%;
					height: 100%;
				}
			}

		}
	}
</style>